<template>
  <div>
    <el-form ref="form" :model="q" label-width="110px" @submit.native.prevent>
      <el-card>
        <el-row style="padding-right: 2%">
          <el-col :xs="24" :sm="12" :md="8" :lg="{span: '4-8'}">
            <el-form-item label="地区名称">
              <el-input size="small" v-model="q.queryName" clearable @change="queryData()" placeholder="请输入地区名称"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="{span: '4-8'}">
            <el-form-item label="地区等级">
              <el-select size="small" style="width: 100%" v-model="q.level" clearable @change="queryData()" placeholder="请选择地区等级">
                <el-option label="省" value="1"/>
                <el-option label="市" value="2"/>
                <el-option label="县/区" value="3"/>
                <!--<el-option label="街道" value="4"/>-->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="{span: '4-8'}">
            <el-form-item label="省份">
              <el-select size="small" style="width: 100%" v-model="q.provinceId" filterable clearable placeholder="请选择省份" @change="queryCity()">
                <el-option v-for="item in provinceList" :key="item.value" :label="item.name" :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="{span: '4-8'}">
            <el-form-item label="城市">
              <el-select size="small" style="width: 100%" v-model="q.cityId" filterable clearable placeholder="请选择城市" @change="queryData()">
                <el-option v-for="item in cityList" :key="item.value" :label="item.name" :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-button size="mini" icon="el-icon-plus" type="primary" v-if="isAuth('sysRegion:save')" @click="editHandle()">新增省份</el-button>
          <el-button size="mini" icon="el-icon-delete" type="danger" v-if="isAuth('sysRegion:delete')" :disabled="dataSelect.length <= 0"
                     @click="deleteData('/sysRegion/delete')">删除</el-button>
          <span style="float:right; display: flex; align-items: center">
            <el-button size="mini" icon="el-icon-search" @click="queryData()">查询</el-button>
          </span>
        </el-row>
      </el-card>
    </el-form>

    <el-table :data="dataList" ref="dataTable" stripe border v-loading="dataLoading" style="width: 100%;"
              @sort-change="(val) => orderSort(val)" @selection-change="(val) => selectionChange(val)">
      <el-table-column type="selection" width="40"/>
      <el-table-column align="center" width="50" label="序号">
        <template slot-scope="scope">{{(q.page - 1) * q.limit + scope.$index + 1}}</template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip min-width="150" prop="name" label="地区名称"/>
      <el-table-column align="center" min-width="100" prop="level" label="地区等级">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.level === 1">省</el-tag>
          <el-tag type="danger" v-if="scope.row.level === 2">市</el-tag>
          <el-tag type="warning" v-if="scope.row.level === 3">县/区</el-tag>
          <el-tag type="primary" v-if="scope.row.level === 4">街道</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip min-width="100" prop="cityName" label="城市名称">
        <template slot-scope="scope">
          <span v-if="scope.row.level === 3">{{scope.row.cityName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip min-width="100" prop="provinceName" label="省份名称">
        <template slot-scope="scope">
          <span v-if="scope.row.level === 2">{{scope.row.cityName}}</span>
          <span v-if="scope.row.level === 3">{{scope.row.provinceName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip min-width="100" prop="orderNum" label="显示顺序" sortable/>
      <el-table-column align="center" show-overflow-tooltip min-width="150" prop="createTime" label="创建时间"/>
      <el-table-column align="center" min-width="150" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="text" v-if="isAuth('sysRegion:info')" @click="detailHandle(scope.row.id)">查看</el-button>
          <el-button size="mini" type="text" v-if="isAuth('sysRegion:update')" @click="editHandle(scope.row.id)">修改</el-button>
          <el-button size="mini" type="text" v-if="isAuth('sysRegion:delete')" @click="deleteData('/sysRegion/delete', scope.row.id)">删除</el-button>
          <el-button size="mini" type="text" v-if="isAuth('sysRegion:save') && scope.row.level == 1" @click="cityAreaHandle(scope.row.id, 2)">添加城市</el-button>
          <el-button size="mini" type="text" v-if="isAuth('sysRegion:save') && scope.row.level == 2" @click="cityAreaHandle(scope.row.id, 3)">添加县/区</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="(val) => sizeChange(val)" @current-change="(val) => currentChange(val)" :page-sizes="[10, 30, 50, 100]"
      :current-page="q.page" :page-size="q.limit" :total="q.totalCount" layout="total, sizes, prev, pager, next, jumper"/>

    <edit v-if="editVisible" ref="edit" @refreshDataList="reloadData()"/>

    <city-area v-if="cityAreaVisible" ref="cityArea" @refreshDataList="reloadData()"/>

    <detail v-if="detailVisible" ref="detail"/>
  </div>
</template>

<script>
  import Edit from './sysRegionEdit'
  import CityArea from './sysRegionCityAreaEdit'
  import Detail from './sysRegionDetail'
  export default {
    data () {
      return {
        q: this.getPage(),
        url: '/sysRegion/list',
        dataList: [],
        dataSelect: [],
        provinceList: [],
        cityList: [],
        cityAreaVisible: false,
        dataLoading: false,
        detailVisible: false,
        editVisible: false
      }
    },
    created () {
      this.getRegionInfo(1, 0)
    },
    components: {
      Detail,
      CityArea,
      Edit
    },
    activated () {
      this.getTableData(this.url, this.q)
    },
    methods: {
      cityAreaHandle (id, level) {
        this.cityAreaVisible = true
        this.$nextTick(() => {
          this.$refs.cityArea.init(id, level)
        })
      },
      queryCity () {
        this.cityList = []
        this.q.cityId = ''
        if (this.q.provinceId) {
          this.getRegionInfo(2, this.q.provinceId)
        }
        this.queryData()
      }
    }
  }
</script>
